<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="top">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-alert
          title="注意:只允许为三级分类设置参数"
          type="warning"
          show-icon
          :closable="false"
        ></el-alert>
      </el-row>

      <el-row style="margin-top: 20px">
        <label>请选择分类:</label>
        <el-cascader
          v-model="selectkeys"
          :options="typelist"
          :props="{
            expandTrigger: 'hover',
            label: 'cat_name',
            value: 'cat_id',
          }"
          @change="handleChange"
          size="small"
        ></el-cascader>
      </el-row>

      <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="dynamic">
            <el-table
              :data="manydata"
              border
              class="tabletop"
              style="width: 100%"
            >
              <el-table-column type="expand"></el-table-column>
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column
                label="参数名称"
                prop="attr_name"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot="header">
                  <el-button type="primary" size="mini" @click="gosave()"
                    >添加</el-button
                  >
                </template>
                <el-table-column fixed="right" label="操作" width="320">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      icon="el-icon-edit"
                      @click="goeait(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      @click="del(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="静态属性" name="satatic">
            <el-table :data="onlydata" border style="width: 100%">
              <el-table-column type="expand"></el-table-column>
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column
                label="参数名称"
                prop="attr_name"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot="header">
                  <el-button type="primary" size="mini" @click="gosave()"
                    >添加</el-button
                  >
                </template>
                <el-table-column fixed="right" label="操作" width="320">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      icon="el-icon-edit"
                      @click="goeait(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      @click="del(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>

      <el-dialog
        :title="dialogtitle"
        :visible.sync="isShow"
        @close="clearsaveobj()"
        :close-on-click-modal="false"
      >
        <el-form :model="saveobj" :rules="checkobj" ref="saveform">
          <el-form-item label="参数名称" prop="attr_name">
            <el-input v-model="saveobj.attr_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "params",
  data() {
    return {
      activeName: "dynamic",
      typelist: [],
      selectkeys: [],
      manydata: [],
      onlydata: [],
      isShow: false,
      dialogtitle: "添加参数",
      saveobj: {
        attrid: 0,
        attr_name: "",
        id: 0,
        attr_sel: "",
      },
      checkobj: {
        attr_name: [
          { required: true, message: "请输入分类参数", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async querytype() {
      let rst = await this.$http.get("categories", { type: 3 });
      if (rst.meta.status == 200) {
        this.typelist = rst.data;
      } else {
        this.$message.error("商品分类列表获取失败");
      }
    },
    handleChange() {
      if (this.selectkeys.length != 3) {
        this.selectkeys = [];
        return;
      }
      this.getparams();
    },
    handleClick() {
      this.getparams();
    },
    async getparams() {
      let sel = this.activeName == "dynamic" ? "many" : "only";
      let id = this.selectkeys[this.selectkeys.length - 1];
      let rst = await this.$http.get(`categories/${id}/attributes`, { sel });
      if (rst.meta.status == 200) {
        if (this.activeName == "dynamic") {
          this.manydata = rst.data;
        } else {
          this.onlydata = rst.data;
        }
      } else {
        this.$message.error("获取参数列表失败");
      }
    },
    gosave() {
      if (this.selectkeys.length == 0) {
        this.$message.warning("请先选择分类");
        return;
      }
      this.dialogtitle = "添加分类参数";
      this.isShow = true;
      this.saveobj.id = this.selectkeys[this.selectkeys.length - 1];
    },
    clearsaveobj() {
      this.savaobj = {
        attrid: 0,
        attr_name: "",
        id: 0,
        attr_sel: "",
      };
    },
    save() {
      this.$refs.saveform.validate(async (valid) => {
        if (valid) {
          let rst = null;
          this.saveobj.attr_sel =
            this.activeName == "dynamic" ? "many" : "only";
          if (this.saveobj.attrid == 0) {
            console.log(this.saveobj.attrid);
            rst = await this.$http.post(
              `categories/${this.saveobj.id}/attributes`,
              this.saveobj
            );
          } else {
            rst = await this.$http.put(
              `categories/${this.saveobj.id}/attributes/${this.saveobj.attrid}`,
              this.saveobj
            );
          }
          if (rst.meta.status == 201 || rst.meta.status == 200) {
            this.getparams();
            this.isShow = false;
          } else {
            this.$message.error("保存失败");
          }
        }
      });
    },
    goeait(row) {
      this.dialogtitle = "编辑分类参数";
      this.saveobj.id = row.cat_id;
      this.saveobj.attrid = row.attr_id;
      this.saveobj.attr_name = row.attr_name;
      this.isShow = true;
    },
    del(row) {
      this.$confirm("此操作将永久删除该文件,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(row);
          let rst = await this.$http.delete(
            `categories/${row.cat_id}/attributes/${row.attr_id}`
          );
          if (rst.meta.status == 200) {
            this.$message.success("删除成功");
            this.getparams();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
  mounted() {
    this.querytype();
  },
};
</script>

<style>
.top {
  margin-bottom: 20px;
}
</style>